import React, {SyntheticEvent} from "react";
import {Input, Space as AntdSpace} from 'antd';
import {VJsonComponent} from "../../factory";
import {YvanEvent} from "../../types";
import {apply, YvanEventBind, YvanEventDispatch, convertCH} from "../../utils/helper";
import * as Extend from '../../extend'
import _ from 'lodash'
import {FormItemBaseState, FormItemBaseProp, VJsonFormItemBase} from "./VJsonFormItemBase";
import {toJS} from "mobx";

export interface TextVJsonProp extends FormItemBaseProp<Text> {
    defaultValue?: string
    maxLength?: number
    prefix?: string | React.ReactNode
    size?: 'large' | 'middle' | 'small'
    suffix?: string | React.ReactNode
    type?: string
    autoTrim?: boolean,
    autoConvertCH?: boolean,
    bordered?: boolean,
}

export interface LabelState extends FormItemBaseState<Text> {
    text?:any
}

@VJsonComponent({
    view: 'label'
})
export default class Label extends VJsonFormItemBase<Text, TextVJsonProp, LabelState> {
    static defaultProps = {
        ...VJsonFormItemBase.defaultProps,
        autoTrim: true,
        autoConvertCH: false,
    }
    
    lock = false

    constructor(props: any) {
        super(props, Label.defaultProps);
        this.state={
            text:props.vjson.text
        }
    }

    protected onValueChange(newValue: any) {
       
    }

    setText(text:any){
        this.setState({
            text:text
        })
    }
    getText(){
        return this.state.text;
    }

    protected renderWrapper(): JSX.Element {
        if (Extend.isDebugMode()) {
            console.log('RenderText ', this.toString())
        }

        return (
            //@ts-ignore
            <span className={'label-text '+apply(this, this.props.vjson.className)} style={apply(this, toJS(this.props.vjson.style))}>
                {this.state.text}
            </span>
        )
    }
}
